<template>
  <div>

    <div class="banner" id="banner1">
      <a  @click="$router.push('/dashboard')"   style="color: white;font-size: small;position: relative;top:70px;left: 1270px;font-weight: bold"  class="banner-title">首页</a>

      <a  @click="$router.push('/myblog')"   style="color: white;font-size: small;position: relative;top:70px;left: 1270px;font-weight: bold"  class="banner-title">我的博客</a>
      <a  @click="$router.push('/message')"   style="color: white;font-size: small;position: relative;top:70px;left: 1270px;font-weight: bold"  class="banner-title">留言</a>
      <a  @click="$router.push('/show')"   style="color: white;font-size: small;position: relative;top:70px;left: 1270px;font-weight: bold"  class="banner-title">江湖</a>
      <a  @click="$router.push('/blogStore')"   style="color: white;font-size: small;position: relative;top:70px;left: 1270px;font-weight: bold"  class="banner-title">商城</a>
      <h1 class="banner-title">我的</h1>
    </div>    <Player/>
    <!--<el-button type="info" @click="$router.push('/myblog')"><i class="el-icon-arrow-left"></i>返回</el-button>-->
    <el-card  style="margin-left: 280px;width: 70%;margin-top: 360px" class="blog-container">

      <div >
        <h2>{{form.title}}</h2>
      </div>
      <el-avatar :src="form.avatar"  style="height: 30px;width: 30px;margin-top: 10px"></el-avatar>
      <span style="font-size: small;position: relative;top: -10px;margin-left: 10px;"> {{form.author}}</span>
      <span style="font-size: small;position: relative;top: -10px;margin-left: 15px">分类:{{form.category}}</span>
      <span class="svg-container" style="margin-left: 20px">
          <svg-icon icon-class="time" style="position: relative;top: -10px;margin-left: 3px"/>

              <span style="font-size: small;position: relative;top: -10px;margin-left: 5px">{{form.time}}</span>
        </span>
   <!--<a style="font-size: small;position: relative;top: -28px;margin-left: 820px;color: deepskyblue;" @click="open(form)">编辑</a>-->

  <!--<div v-html="form.content" ></div>-->
      <div>
        <div id="toolbar-container" class="toolbar"></div>

        <div id="text-container" class="text" style="font-size: 15px" ></div>
      </div>

    </el-card>
    <div app padless absolute>
      <div class="footer-wrap" style="margin-top: 70px">
        <div>©2021 - {{ new Date().getFullYear() }} By chenchao</div>
        <a href="https://beian.miit.gov.cn/" target="_blank">
          邮箱：2776895893@qq.com
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '../utils/request'
  import E from 'wangeditor'
  import "../assets/index.css";
  import '../../public/ribbon.js'
  import Player from '../components/zw-player/player.vue'
  let editor
  export default {
    name: 'Detail',
    components:{Player},
    data() {
      return {
        form:{content:''},
        forms:{}
      }
    },
    mounted() {


      //关联div
      this.$nextTick(() => {
        editor = new E("#toolbar-container", "#text-container");

        editor.config.uploadImgServer = 'http://localhost:8083/files/editor/load'
        editor.config.uploadFileName = 'file'
        editor.create()
        editor.disable();

      })
    },
    created() {

     let str= sessionStorage.getItem("user")
      this.forms=JSON.parse(str)

      let id = this.$route.query

      this.form = this.$route.query

      request.get('/news/query/' + id.id).then(res => {

       this.form=res.data
        editor.txt.html(this.form.content)
        this.form.avatar=this.forms.avatar
      })

    },
    methods:{
      open(forms){
        let id=forms.id
        this.$router.push({
          path: '/UpdateBlog/',

          query: {id}
        })
      }
    }

  }
</script>

<style scoped>
  .toolbar {
    border: 1px solid #ccc;
    display: none;
  }
  .text {
    border: 0px solid #ccc;
    min-height: 300px;
  }
  #banner1{
    background: url('https://www.static.talkxj.com/config/643f28683e1c59a80ccfc9cb19735a9c.jpg') no-repeat center center/cover;
  }

  .footer-wrap {
    width: 100%;
    line-height: 2;
    position: relative;
    padding: 40px 20px;
    color: #eee;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: Gradient 10s ease infinite;
  }

  .footer-wrap a {
    color: #eee !important;
  }

  @keyframes Gradient {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

</style>
